<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.9.1-vsdoc.js"></script>
	<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
</head>
<body>
<table id="myt" border="1" cellpadding="0" cellspacing="0" />
</body>
</html>
<script>
	$(function(){
		var trString = "";
		for(var i=0 ; 9>i ; i++){
			trString += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
		}
		$('#myt').append(trString).css({"width":"300px" , "height" : "300px"});
		
		$('#myt td').click(function(){
			var td = $(this);
	        	//td.parents("table:first").find("td").css("background-color", "white");
	        	$('#myt td').css("background-color" , 'white');
	            	var tr = td.parent();
	                var nthChild = tr.children().index(td) + 1;
	                tr.children().css("background-color", "red");
	                tr.siblings().find("td:nth-child(" + nthChild + ")").css("background-color", "green");
	                td.css("background-color", "black");
		});
	});
</script>